<template>
	<view>
		<view class="order_title">
			
		</view>
		<fui-tabs :tabs="tabs" :short="false" @change="change" selectedColor="orange"sliderBackground="orange">
		</fui-tabs>
		<view v-if="current==0">
			<view>
				<view v-for="(item,index) in orderList" :key = "index" style="margin-left: 24rpx;margin-top: 20rpx; margin-right: 24rpx;">
					<view class="allone-item allone" @click="toDetail(item)">
						<view style="color:black;font-size:36rpx;display: flex; justify-content: space-between;">
							<view>{{item.scName}}门票</view>
							<view v-if="item.status!=0" style="margin-right: 24rpx; font-size: 26rpx;">{{tabs[item.status+1]}}</view>
							<view v-if="item.status==0" style="margin-right: 24rpx; font-size: 26rpx; color: red;">{{tabs[item.status+1]}}</view>
						</view>
						<view style="color:#999AAA;font-size:15px">下单时间：{{item.createTime}}</view>
						<view style="color:#999AAA;font-size:15px">数量：{{item.num}}</view>
						<view style="color:#999AAA;font-size:15px;display: flex; justify-content: space-between;">
							<view>
								<text>总价：{{item.sumPrice}}</text>
							</view>
							<view v-if="item.status==0" style="color: red; margin-right: 24rpx;">
								订单将于{{display(item.createTime)}}自动取消
							</view>
						</view>
					</view>
					
				</view>
				
			</view>
			
		</view>
		<view v-if="current==1">
			<view>
				<view v-for="(item,index) in orderList" :key = "index" style="margin-left: 24rpx; margin-right: 24rpx;">
					<view v-if = "item.status==0" class="allone allone-item" @click="toPay(item)">
						<view style="color:black;font-size:36rpx;display: flex; justify-content: space-between;">
							<view>{{item.scName}}门票</view>
							<view style="margin-right: 24rpx; font-size: 26rpx; color:red">{{tabs[item.status+1]}}</view>
						</view>
						<view style="color:#999AAA;font-size:15px">下单时间：{{item.createTime}}</view>
						<view style="color:#999AAA;font-size:15px">数量：{{item.num}}</view>
						<view style="color:#999AAA;font-size:15px;display: flex; justify-content: space-between;">
							<view>
								<text>总价：{{item.sumPrice}}</text>
							</view>
							<view style="color: red; margin-right: 24rpx;">
								订单将于{{display(item.createTime)}}自动取消
							</view>
						</view>
					</view>
					
				</view>
				
			</view>
			<view>
				
			</view>
		</view>
		<view v-if="current==2">
			<view>
				<view  v-for="(item,index) in orderList" :key = "index" style="margin-left: 24rpx; margin-right: 24rpx;">
					<view v-if = "item.status==1" class="allone allone-item" @click="toDetail(item)">
						<view style="color:black;font-size:36rpx;display: flex; justify-content: space-between;">
							<view>{{item.scName}}门票</view>
							<view style="margin-right: 24rpx; font-size: 26rpx;">{{tabs[item.status+1]}}</view>
						</view>
						<view style="color:#999AAA;font-size:15px">下单时间：{{item.createTime}}</view>
						<view style="color:#999AAA;font-size:15px">数量：{{item.num}}</view>
						<view style="color:#999AAA;font-size:15px">总价：{{item.sumPrice}}</view>
					</view>
					
				</view>
				
			</view>
		</view>
		<view v-if="current==3">
			<view >
				<view v-for="(item,index) in orderList" :key = "index" style="margin-left: 24rpx; margin-right: 24rpx;">
					<view v-if = "item.status==2" class="allone allone-item" @click="toDetail(item)">
						<view style="color:black;font-size:36rpx;display: flex; justify-content: space-between;">
							<view>{{item.scName}}门票</view>
							<view style="margin-right: 24rpx; font-size: 26rpx;">{{tabs[item.status+1]}}</view>
						</view>
						<view style="color:#999AAA;font-size:15px">下单时间：{{item.createTime}}</view>
						<view style="color:#999AAA;font-size:15px">数量：{{item.num}}</view>
						<view style="color:#999AAA;font-size:15px">总价：{{item.sumPrice}}</view>
					</view>
					
				</view>
				
			</view>
		</view>
		
		<uni-popup ref="popup" background-color="#fff" @change="changePopup" :mask-click="false">
						<view style="width: 100%; height: 300rpx;">
							<view style="width: 100%; text-align: center;">
								<text style="font-size: 36rpx; font-weight: 700;">收银台</text>
							</view>
							<view style="width: 100%; margin-top: 20rpx; text-align: center;">
								<view style="height: 50rpx; line-height: 80rpx; margin-left: 15rpx;">
									<text>实付金额：
										<text style="color: red;">¥{{sumPrice}}</text>
									</text>
								</view>
								
								<view  style="margin-top: 60rpx; display: flex; justify-content: space-between;">
									<view @click="PayMoney()"style="width: 200rpx; height: 80rpx; line-height: 80rpx; background-color: #00d79c; border-radius: 15rpx; margin-left: 50rpx;">
										立即支付
									</view>
									<view @click="cancelPay()"style="width: 200rpx; height: 80rpx; line-height: 80rpx; background-color: slateblue; border-radius: 15rpx; margin-right: 50rpx;">
										取消
									</view>
								</view>
							</view>
						</view>
					</uni-popup>
	</view>
</template>

<script>
import fuiTabs from "@/components/firstui/fui-tabs/fui-tabs.vue"


export default {
	components:{
		fuiTabs
	},
	data() {
		return {
				token:' ',
				tabs: ['全部','未支付','未使用','已使用'],
				current:0,
				orderList:[
					
				],
				displayedList:[],
				sumPrice:null,
				payOrderId:null,
		}
	},
	onLoad(){
		this.getOrders()
	},
	
	methods: {
		display(date){
			var date1 = new Date(date)
			var timestamp = date1.getTime()
			timestamp = timestamp + 10*60*1000
			var d = new Date(timestamp)
			var day = d.getDate()
			var hour = d.getHours()
			var minute = d.getMinutes()
			var h0 = ''
			var m0 = ''
			if(minute<10){
				m0 = '0'
			}
			if(hour<10){
				h0 = '0'
			}
			return h0+hour+':' +m0+minute
		},
		change(data){
			this.current  = data.index
		},
		async getOrders(){
			this.token = uni.getStorageInfoSync('token')
			
			await this.request({
					url:"/ticket-order/list",
					method:'GET'
				}).then(res=>{
					if(res.code==='1'){
						this.orderList = res.data
						console.log(res.data)
					}else{
						uni.showToast({
							icon:'error',
							title:'请求数据失败'
						})
					}
					
				}).catch(()=>{
					uni.showToast({
						icon:'error',
						title:'服务异常'
					})
				})
			
			
		},
		toDetail(item){
			var id = item.orderId
			if(item.status==0){
				this.toPay(item)
			}else{
				uni.navigateTo({
					url:'/pages/ticket_order_detail/ticket_order_detail?orderId='+id
				})
			}
			
		},
		toPay(item){
			this.sumPrice = item.sumPrice
			this.payOrderId = item.orderId
			this.$refs.popup.open('bottom')
		},
		async PayMoney(){
			await this.request({
				url:'/ticket-order/pay',
				method:'GET',
				data:{
					orderId:this.payOrderId
				}
			}).then(res=>{
				if(res.code==='1'){
					uni.showToast({
						icon:'success',
						title:'支付成功',
						duration:2000
					})
					this.$refs.popup.close()
					uni.navigateTo({
						url:'/pages/pay-view/pay-view'
					})
					this.$refs.popup.close()
					window.location.reload()
				}else{
					uni.showToast({
						icon:'error',
						title:'支付失败',
						duration:2000
					})
				}
			}).catch(()=>{
				uni.showToast({
					icon:'error',
					title:'支付失败',
					duration:2000
				})
			})
			
			this.$refs.popup.close()
		},
		cancelPay(){
			uni.showToast({
				icon:'error',
				title:'取消支付',
				duration:1500
			})
			this.$refs.popup.close()
		}
		
	}
}
</script>
<style>
		.allone{
			background-color: #F9F9F9;
			height: 180rpx;
			width: 88%;
			margin-left: 24rpx;
			margin-top: 30rpx;
			margin-right: 24rpx;
			border-radius: 20rpx;
			padding-left: 24rpx;
		}
		
	
	
	
</style>